<template>
  <div
    class="widget-camera flex flex-wrap"
    :class="[direction, { 'flex-reverse': direction === 'right' }]"
  >
    <div
      class="widget-camera-block relative pointer hover-border-active flex-noshrink imgwh"
      :class="{ active: selected && selected === camera }"
      v-for="camera in list"
      :key="camera"
      @click.prevent.stop="$emit('click', camera)"
    >
      <img
        class="black-bg"
        style="width:100%;height:100%"
        :src="$resolvePath(camera)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "WidgetCameraImg",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selected: {
      type: Object,
      default: () => {
        return {};
      }
    },
    controls: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: "left"
    },
    imgWidth: {
      type: String,
      default: "400px"
    },
    imgHeight: {
      type: String,
      default: "300px"
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/animations/focus.scss";
.widget-camera {
  .widget-camera-block {
    margin-bottom: 8px;
    &:hover .handler {
      opacity: 1;
    }
    .handler {
      opacity: 0;
      transition: opacity 0.25s;
    }
    &.active {
      @extend .focus-shadow;
    }
  }
  &.left .widget-camera-block {
    margin-right: 8px;
  }
  &.right .widget-camera-block {
    margin-left: 8px;
  }
  .imgwh {
    width: 180px;
    height: 120px;
  }
}
</style>
